<template>
  <!-- 导航栏 -->
  <div class="daohan-a">
    <div id="dhl">
      <ul class="shang">
        <router-link to="/DanCiBen">
          <li>
            <p><img src="../../../public/images/4.jpg" alt="" /></p>
            <h5>单词本</h5>
          </li>
        </router-link>
        <li>
          <p><img src="../../../public/images/5.jpg" alt="" /></p>
          <h5>拍照翻译</h5>
        </li>
        <li>
          <p><img src="../../../public/images/6.jpg" alt="" /></p>
          <h5>对话翻译</h5>
        </li>
        <li>
          <p><img src="../../../public/images/7.jpg" alt="" /></p>
          <h5>巧记单词</h5>
        </li>
        <li>
          <p><img src="../../../public/images/8.jpg" alt="" /></p>
          <h5>词典笔</h5>
        </li>
        <router-link to="/cihuiyufa">
          <li>
            <p><img src="../../../public/images/9.jpg" alt="" /></p>
            <h5>词汇语法</h5>
          </li>
        </router-link>
        <router-link to="/monikaoti">
          <li>
            <p><img src="../../../public/images/10.jpg" alt="" /></p>
            <h5>模考整题</h5>
          </li>
        </router-link>
        <router-link to="/YueDu">
          <li>
            <p><img src="../../../public/images/11.jpg" alt="" /></p>
            <h5>真题阅读</h5>
          </li>
        </router-link>
        <router-link to="/QiuZhi">
          <li>
            <p><img src="../../../public/images/12.jpg" alt="" /></p>
            <h5>求职</h5>
          </li>
        </router-link>
        <li>
          <p><img src="../../../public/images/13.jpg" alt="" /></p>
          <h5>壹句跟读</h5>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.daohan-a {
  /* height: 2rem; */
  background-color: #fff;
  margin-top: 1.3rem;
}
#dhl {
  width: 3.4rem;
  height: 1.5rem;
  margin: 0.15rem auto;
  border-radius: 0.06rem;
}
#dhl .shang {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#dhl .shang li {
  list-style: none;
  width: 0.56rem;
  height: 45%;
  margin-left: 0.05rem;
  text-align: center;
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
}
#dhl .shang li p img {
  margin-left: 0.1rem;
}
#dhl .shang li p {
  width: 0.45rem;
  height: 0.43rem;
  margin: auto;
  /* background-color: #ff5b3e; */
  line-height: 0.45rem;
  border-radius: 0.05rem;
  margin-left: 0.03rem;
}
#dhl .shang li h5 {
  color: #2d2d2d;
  font-size: 0.14rem;
}
</style>

